<template>
    <div v-if="selfLinkTraceData && selfLinkTraceData.length>0" class=" blm-richText source-container">
        <span class="source-title">来源：</span>
        <template  v-if="sourceIsOpen">
        <span v-for="(item,index) in selfLinkTraceData" class="source-tag" :key="index"  @click="openSourceDetail(item)">
            {{index+1}}.&nbsp;{{ item.domain || item.title }}
        </span>
        </template>
        <span v-else class="source-tag" @click="openSourceDetail(selfLinkTraceData[0])">
            {{1}}.&nbsp;{{ selfLinkTraceData[0].domain || selfLinkTraceData[0].title }}
        </span>
        <template v-if="selfLinkTraceData.length>1" >
        <span class="source-tag" v-if="sourceIsOpen" @click="switchOpen">-收起</span>
        <span class="source-tag" v-else @click="switchOpen">+展开</span>
        </template>
        <BlmSourceDetail :visible="sourceDetailVisible" @update:visible="sourceDetailVisible = $event" :sourceData="sourceData" />
    </div>
</template>
<script>
import BlmSourceDetail from "./BlmSourceDetail.vue";

export default {
    props: {
        selfLinkTraceData: {
            type: Object|Array,
            default() {
                return {}
            },
        },
    },
    components:{
        BlmSourceDetail
    },
    data(){
        return {
            sourceIsOpen:false,
            sourceData:null,
            sourceDetailVisible:false,
        }
    },
    methods: {    
        switchOpen(){
            this.sourceIsOpen=!this.sourceIsOpen
        },
        openSourceDetail(sourceData){
            if(sourceData.jump_type ===  'data_query'){
                this.sourceData = sourceData;
            }else{
                this.sourceData = this.selfLinkTraceData.filter(item=>item.jump_type !== 'data_query');
            }
            
            this.sourceDetailVisible = true;
        },
    },
}
</script>
<style scoped lang="less">
@import (once) '@/styles/variable.less';
.blm-richText {
     background-color: @white-color-1;
    white-space: pre-wrap;
    padding: 6px @padding10;
    font-size: 16px;
}
.source-tag{
    color:#007df0;
    background: @black-color-a-10;
    padding: 2px;
    border-radius: 4px;
    margin: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.source-title{
    color: @black-color-13;
    }
    .source-container{
        display: flex;
    flex-wrap: wrap;
    gap: 4px;

    }
</style>
